<template>
  <el-form :model="goods" label-position="right" label-width="160px">

    <div v-if="goods.stock && goods.stock.length > 0">
      <div class="goods-title">规格</div>
      <!-- 表格 -->
      <div>
        <el-table :data="goods.stock" style="width:100%" stripe>
          <el-table-column label="商品图片" align="center">
            <template slot-scope="scope">
              <l-pic
                      :picurl="scope.row.pic_url"
                      :pickey="scope.row.id"
                      :picdata="scope.row"
                      :picmargin="'0'"
                      :size="{ width:30, height:30 }"
                      :ischecked="false"
                      :disdel="false"/>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="property1_name" label="规格1" align="center"></el-table-column>
          <el-table-column prop="property2_name" label="规格2" align="center"></el-table-column>
          <el-table-column prop="price" label="价格" align="center"></el-table-column>
          <el-table-column label="拼团价" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.assemble_price" placeholder="请输入" size="small" style="width: 150px;"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="goods-title">拼团设置</div>
    <!-- 拼团设置 -->
    <div>
      <el-form-item label="开启拼团" class="goods-form-item">
        <el-switch v-model="goods.is_open_assemble"  active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
        <div class="goods-form-item-button-text">开启后，该商品进入拼团模式，类似拼多多最低2人以上才能成交。注：同一商品不能同时开启秒杀、拼团、砍价，只能开启其中一种营销模式</div>
      </el-form-item>
      <transition name="el-zoom-in-top">
        <div v-if="goods.is_open_assemble === '1'">
          <el-form-item label="单独购买" class="goods-form-item">
            <el-switch v-model="goods.is_self"  active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
            <div class="goods-form-item-button-text">是否允许该商品以原价单独购买</div>
          </el-form-item>
          <el-form-item label="虚拟成团" class="goods-form-item">
            <el-switch v-model="goods.is_automatic"  active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
            <div class="goods-form-item-button-text">开启后，未成团的团会在最后五分钟虚拟成团，以便成交订单</div>
          </el-form-item>
          <el-form-item label="老带新" class="goods-form-item">
            <el-switch v-model="goods.older_with_newer"  active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
            <div class="goods-form-item-button-text">开启后，该拼团仅能老客户分享给新客户下单</div>
          </el-form-item>
          <el-form-item label="是否团长优惠" class="goods-form-item">
            <el-switch v-model="goods.is_leader_discount"  active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
            <div class="goods-form-item-button-text">开启后，可以设置给开团的团长优惠多少比例</div>
          </el-form-item>
          <el-form-item label="是否显示团长优惠" class="goods-form-item">
            <el-switch v-model="goods.is_show"  active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
            <div class="goods-form-item-button-text">开启后，将把团长的优惠显示在前端</div>
          </el-form-item>
          <el-form-item label="成团人数" class="goods-form-item">
            <el-input v-model="assemble_number" placeholder="请输入" size="small" style="width: 150px;"></el-input>
            <div class="goods-form-item-button-text">该团最终成团人数，最低2人</div>
          </el-form-item>
          <el-form-item label="团长优惠比例" class="goods-form-item" v-if="goods.is_leader_discount === '1'">
            <el-input v-model="assemble_group_discount" placeholder="请输入" size="small" style="width: 150px;"></el-input>%
            <div class="goods-form-item-button-text">给开团人的优惠比例，如填10，即10元减1元</div>
          </el-form-item>
        </div>
      </transition>
    </div>

    <div style="text-align:center">
      <el-button type="primary" size="small" @click="submit">保 存</el-button>
    </div>
  </el-form>
</template>

<script>
import { putTuanGoods } from '@/api/marketing'
import LPic from '@/components/lPic'

export default {
  name: 'setting-yly',
  components: {
    LPic,
  },
  props: {
    goods: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      searchName: '',
      groupTypeList: [],
      assemble_number: '0',
      assemble_group_discount: '0',
      assemble_id: '0',
    }
  },
  mounted() {
    if (this.goods.assemble_id) {
      this.assemble_id = this.goods.assemble_id;
    }
    if (this.goods.assemble_number) {
      this.assemble_number = this.goods.assemble_number[0];
    }
    if (this.goods.assemble_group_discount) {
      this.assemble_group_discount = this.goods.assemble_group_discount[0];
    }
  },
  watch: {
    goods(newValue) { //商品分组
      console.log(newValue)
      if (newValue.assemble_id) {
        this.assemble_id = newValue.assemble_id;
      }
      if (newValue.assemble_number) {
        this.assemble_number = newValue.assemble_number[0];
      }
      if (newValue.assemble_group_discount) {
        this.assemble_group_discount = newValue.assemble_group_discount[0];
      }
    },
  },
  methods: {
    /**
     * 保存
     */
    submit() {
      this.goods.tuan_type = '1';
      if (this.assemble_number === '0') {
        this.$message.warning('未填写成团人数');
        return;
      } else {
        this.goods.assemble_number = [this.assemble_number];
      }
      if (this.goods.is_leader_discount === '1' && this.assemble_group_discount === '0') {
        this.$message.warning('未填写团长优惠比例');
        return;
      } else {
        this.goods.assemble_group_discount = [this.assemble_group_discount];
      }
      this.goods.key = this.$store.state.app.activeApp.saa_key;
      this.goods.assemble_id = this.assemble_id;
      if (this.goods.goods_id) {
        this.goods.id = this.goods.goods_id;
      }
      delete this.goods.create_time;
      delete this.goods.update_time;
      putTuanGoods(this.goods).then(res => {
        if(res.status === 200){
          this.$message.success(res.message);
          this.$emit('jump_to_1', {index: 1});
        }else{
          this.$message.error(res.message);
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.setting-yly-row{
  margin: 15px 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &-col{
    padding: 0 15px;
    max-width: 95%;
    overflow: hidden;
    display: flex;
  }
}


.goods-title{
  height: 47px;
  width: 100%;
  line-height: 47px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #8f8f8f;
  padding: 0 10px;
  background-color: #F4F8FB;
}
.goods-form-item{
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 5px 0;
  box-sizing: border-box;
  &-input{
    width: 50%;
    height: 40px;
    line-height: 40px;
  }
  &-text{
    width: calc(50% - 100px);
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 20px;
    color: #c0c4cc;
    font-size: 14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align: middle;
  }
  &-button-text{
    width: calc(100% - 200px);
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 20px;
    color: #c0c4cc;
    font-size: 14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align: middle;
  }
  &-button{
    padding: 5px 10px;
    margin-left: 10px;
  }
  &-video{
    height: 150px;
    min-width: 200px;
    max-width: 100%;
  }
}

</style>